<template>
  <Layout class="layout-100">
    <Header class="header-cont">现有人员调入</Header>
    <Content class="content-cont">
      <RadioGroup v-model="joinType" @on-change="changeJoinType(joinType)" class="checkPersonType">
        <Radio :label="2" border>专职调入</Radio>
        <Radio :label="3" border>兼职调入</Radio>
        <Radio :label="4" border>项目转正</Radio>
      </RadioGroup>
      <Tabs type="card" @on-click="changeType">
        <TabPane label="公司人员" name="1"></TabPane>
        <TabPane label="项目人员" name="2"></TabPane>
      </Tabs>
      <Layout class="layout-100">
        <Sider width="300" class="tree-box">
          <Tree :data="tree" @on-select-change="checkTree" class="tree"></Tree>
        </Sider>
        <Content class="table-box">
          <Table border :columns="columns" :data="personList" class="scroll-bar"></Table>
          <Row type="flex" justify="center">
            <Col>
            <Page
              class="pagination"
              :total="page.totalRecord"
              :current="page.current"
              :page-size-opts="[10,20,50,100]"
              :page-size="page.pageSize"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              transfer
              show-elevator
              show-total
              show-sizer
            />
            </Col>
          </Row>
        </Content>

      </Layout>
    </Content>
  </Layout>

</template>
<script>
  import Cookies from 'js-cookie'
  import { mapMutations } from 'vuex'
  export default {
    name: 'enterprise-check-person',
    data() {
      return {
        joinType:2,
        tree:[],
        personList:[],
        treeActive:[],
        checkType:1,
        page: {
          total: 0,
          current: 1,
          pageSize: 10,
          totalPage: 0,
        },
        columns: [
          {
            title: '序号',
            align: 'center',
            width: 70,
            render: (h, params) => {
              return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
            }
          },{
          title: '姓名',
          key: 'name',
          align: 'center',
            render:(h, params)=>{
              return h('span', {
                props: {
                  type: 'text',
                  title:params.row.name,
                  class:'button-class'
                },
                style:{
                  color: '#0099ff',
                  padding: '0 5px',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    if(params.row.allowSelect){
                      this.SaveBtn(params.row.personUserOrgId)
                    }
                  }
                }
              },params.row.name )
            }
        }, {
          title: '联系电话',
          key: 'tel',
          align: 'center',
        }, {
          title: '职务',
          align: 'center',
          key: 'postName',
        }],
        page: {
          total: 0,
          current: 1,
          pageSize: 10,
          totalPage: 0,
        },
      }
    },
    methods: {
      ...mapMutations(['closeTag']),
      closetab() {
        /**
         * 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
         * 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
         */
        this.closeTag({
          name: this.$route.name,
          params: this.$route.params,
          query:this.$route.query
        });
      },
      //跳转详情
      SaveBtn(id){
        let person = {
          id:id,
          joinType:this.joinType
        }
        localStorage.setItem('joinUser', JSON.stringify(person));
        this.closeTag({
          name: this.$route.name,
          params: this.$route.params,
          query: this.$route.query,
        });
      },
      changeType(name){
        this.checkType = name;
        if(name == 1){
          this.personList = [];
          this.getEnterpriseTree()
        }else{
          this.personList = [];
          this.getProjectTree()
        }
      },
      changeJoinType(code){
          this.joinType = code;
      },
      //获取公司树
      getEnterpriseTree () {
        this.$api.ProjectPerson.getEnterpriseTree().then((res) => {
          if(res.code == 200){
            this.tree = res.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      //获取项目树
      getProjectTree () {
        this.$api.ProjectPerson.getProjectTree().then((res) => {
          if(res.code == 200){
            this.tree = res.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        })
      },
      checkTree(data){
        this.page.current = 1;
        this.page.pageSize = 10;
        this.getProPersonList(data);
      },
      getProPersonList(data) {
        if(data.length>0){
          this.treeActive = data;
          let params = {
            currentPage: this.page.current,
            pageSize: this.page.pageSize,
            whereMap: {}
          }
          if(this.checkType == 1){
            params.whereMap.searchType = 1;
          }else{
            params.whereMap.searchType = 2;
          }
          if(data[0].type == 1 || data[0].type == 5){
            params.whereMap.enterpriseId = data[0].objectId;
          }else if(data[0].type == 2){
            params.whereMap.projectTeamId = data[0].objectId;
          }else if(data[0].type == 3){
            params.whereMap.workPointId = data[0].objectId;
          }
          else if(data[0].type == 4 || data[0].type == 6 || data[0].type == 7 || data[0].type == 8){
            params.whereMap.deptId = data[0].objectId;
          }
          params.whereMap.excludeDeptId = this.$route.query.deptId;
          this.$api.ProjectPerson.getProPersonList(params).then(res => {
            if (res.code === 200) {
              this.personList = res.data.resultObject
              this.page.totalRecord = res.data.totalRecord
              this.page.totalPage = res.data.totalPages
            } else {
              this.$Message.error(res.data.data)
            }
          })
        }else{
          this.personList = [];
        }
      },
      pageChange (current) {
        this.page.current = current;
        this.getProPersonList(this.treeActive)
      },
      pageSizeChange (size) {
        console.log(size);
        this.page.pageSize = size;
        this.getProPersonList(this.treeActive)
      },
    },
    mounted () {
      this.personList = [];
      this.joinType = 2;
      this.getEnterpriseTree();
    }

  }
</script>
<style lang="scss" scoped>
  .tree-box{
    background-color: #ffffff;
    border: 1px solid #dcdee2;
  }
  .table-box{
    background-color: #ffffff;
    margin-left:20px;
    border: 1px solid #dcdee2;
  }
  .tree{
    width: 250px;
    margin-left: 20px;
    margin-top: 15px;
    overflow: auto;
    height: 90%;
  }
  .checkPersonType{
    margin-bottom: 40px;
  }
</style>